<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form
          class="login_form"
          ref="form"
          :model="loginForm"
          :rules="rules"
          size="large"
          status-icon
        >
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              v-model.trim="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              :prefix-icon="Lock"
              show-password
              v-model.trim="loginForm.password"
              @keyup.enter="login"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading-icon="Eleme"
              :loading="loading"
              class="login_btn"
              @click="login"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
import userUserStore from '@/store/modules/user'
import { useRouter, useRoute } from 'vue-router'
import { Eleme } from '@element-plus/icons-vue'
import { getTime } from '@/utils/time'

// 获取用户仓库
const useStore = userUserStore()
// 使用 router 对象进行路由跳转
const router = useRouter()
// 使用 route 对象获取当前路由信息
const route = useRoute()

// 收集账号密码的数据
const loginForm = ref({
  username: '',
  password: '',
})

// 获取form表单内容，后续进行表单验证
const form = ref()
// 加载效果
const loading = ref(false)

// 整个表单的效验规则
// 1. 非空校验 required: true    message消息提示    trigger触发效验的时机 blur-失焦时触发 change-数据变化时触发
// 2. 长度校验 min: XX, max: XX
// 3. 正则校验 pattern: 正则规则    \S 非空字符
// 4. 自定义校验
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 15, message: '密码长度为6到15位', trigger: 'change' },
  ],
}

// 登录业务
const login = async () => {
  // 提交使进行表单校验
  await form.value.validate()
  // 打开加载效果
  loading.value = true
  try {
    // 登入成功
    await useStore.userLogin(loginForm.value)
    // 关闭加载效果
    loading.value = false
    // 判断登录的时候，路由路径中是否有query参数，如果有，则跳转到对应的页面，没有则跳转到首页
    const rediect: any = route.query.redirect
    router.push({ path: rediect || '/' })
    ElNotification({
      title: `Hi，${getTime()}好`,
      message: '欢迎回来',
      type: 'success',
    })
  } catch (error) {
    // 关闭加载效果
    loading.value = false
    // 登录失败
    ElNotification({
      type: 'error',
      message: (error as Error).message,
    })
    loginForm.value = {
      username: '',
      password: '',
    }
  }
}
</script>

<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;

  .login_form {
    position: relative;
    width: 80%;
    top: 30vh;
    background: url('@/assets/images/login_form.png') no-repeat;
    background-size: cover;
    padding: 40px;

    h1 {
      color: #fff;
      font-size: 40px;
    }

    h2 {
      color: #fff;
      font-size: 20px;
      margin: 20px 0;
    }

    .login_btn {
      width: 100%;
    }
  }
}
</style>
